<!DOCTYPE html>
<!--声明 Thymeleaf 的命名空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!-- 引入bootstrap的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css"></link>
<link rel="stylesheet" href="../js/bootstrap/bootstrap3/css/bootstrap.css.map"></link>
<!-- 引入jquery的js  -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- 引入bootstrap的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap3/js/bootstrap.js"></script>
<!-- 引入boostrap的表格的css、js -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-table/bootstrap-table.css"></link>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/bootstrap-table.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<!-- 引入bootbox弹框的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-bootbox/bootbox.js"></script>
<!-- 引入bootbox时间 的css -->
<link rel="stylesheet" href="/js/bootstrap/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css"></link>
<!-- 引入bootbox时间 的js -->
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/js/bootstrap/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<!-- 引入bootbox上传图片 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-fileinput/css/fileinput.css"></link>
<!-- 引入bootbox上传图片 的js -->
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/fileinput.js"></script>
<script type="text/javascript" src="../js/bootstrap/bootstrap-fileinput/js/locales/zh.js"></script>
<!-- 引入bootbox开关 按钮 的css -->
<link rel="stylesheet" href="../js/bootstrap/bootstrap-switch-master/css/bootstrap3/bootstrap-switch.css"></link>
<body>

<form class="form-inline">
    <div  class="form-group">
        <label>影片名称</label>
        <input class="form-control" id="movieName">


    </div>

    <button onclick="search()" class="btn btn-primary glyphicon glyphicon-search" type="button">搜索</button>
</form>






<table class="table" id="myTable"></table>
</body>
<script>

    $(function(){
        initPicture();
        dateTc();
    })


    function dateTc() {
        $('.date').datetimepicker({
            language: 'zh-CN',//显示中文
            format: 'yyyy-mm-dd',//显示格式
            minView: "month",//设置只显示到月份
            initialDate: new Date(),//初始化当前日期
            autoclose: true,//选中自动关闭
            todayBtn: true,//显示今日按钮
        })
    }

    function initPicture(){
        $('#myTable').bootstrapTable({
            toolbar:'#toolbar',//工具栏
            url:'/sec/findPicture',//获取数据地址
            pagination:true, //是否展示分页
            pageList:[2, 4, 6, 10],//分页组件
            pageNumber:1,//默认页码
            pageSize:2,//默认每页条数
            sidePagination:'server',//分页方式：client客户端分页，server服务端分页（*
            striped:true,//斑马线
            queryParams:function(){
            var movieName = $("#movieName").val();
            var type = $("#type").val();
            //alert(type)
                return {
                    page: this.pageNumber,
                    rows: this.pageSize,
                    movieName:movieName,
                    movieType:type,
                };
            },
            columns:[
                {field:"checkbox",checkbox:true},
                {field:"movieId",title:"ID"},
                {field:"movieName",title:"电影名称"},
                {field:"typename",title:"电影类型"},
                {field:"moviestate",title:"电影国家"},
                {field:"moviedate",title:"电影时长"},
                {field:"director",title:"导演名称"},
                {field:"synopsis",title:"影片简介"},
                {field:"filmSchedule",title:"上映时间"},
                {field:"img",title:"封面",formatter:function(value,row,index){
                        return "<img src='"+value+"' width='50px' height='50px' class='img-circle'>";
                    }}
            ]
        })
    }


    search=function () {
        $('#myTable').bootstrapTable("refresh");
    }

    //删除
    del=function (ids) {
        $.ajax({
            url:"/sec/del",
            data:{ids:ids},
            success:function () {
                $('#myTable').bootstrapTable("refresh");
            }
        })
    }

    var res;
    function createAddContent(url){
        $.ajax({
            url:url,
            async:false,//同步
            success:function(data){
                res = data;
            }
        });
        return res;
    }

    //新增弹框
    function add(){
    location.href="/addMovie";
    }

   //跳页面回显
    update=function (ids) {
        location.href="/sec/movieQuery?ids="+ids;
    }


    //修改
    function ss(ids){
        bootbox.dialog({
            title:'新增用户',
            message: createAddContent("/addMovie"),
            closeButton: true,
            buttons : {
                "success" : {
                    "label" : "<i class='icon-ok'></i> 保存",
                    "className" : "btn-sm btn-success",
                    "callback" : function() {//回调函数
                        //提交表单
                        $.ajax({
                            url:"/sec/addMovie",
                            type:'post',
                            data:$("#addForm").serialize(),//表单序列化
                            success:function(data){
                                //刷新表格
                                $('#myTable').bootstrapTable('refresh');
                            }
                        });
                    }
                },
                "cancel" : {
                    "label" : "<i class='icon-info'></i> 取消",
                    "className" : "btn-sm btn-danger"
                }
            }

        });
//回显
        uploadImg();
        directorimg();
        $.ajax({
            url:"/sec/movieQuery",
            data:{ids:ids},//表单序列化
            success:function(data){
              $("#movieId").val(data.movieId);
              $("#name").val(data.movieName);
              $("#director").val(data.director);
              $("#actor").val(data.actor);
              $("#moviedate").val(data.moviedate);
              $("#filmSchedule").val(data.filmSchedule);
              $("#synopsis").val(data.synopsis);
              $("#moviestate").val(data.moviestate);
              $("#testimg").val(data.img);
              $("#textimg").val(data.directorimg);
              $("#moviePrice").val(data.moviePrice);

              debugger;
              $("input[name='typeids']").each(function () {
                  if (data.typename.indexOf("喜剧") != -1){
                        $("[name='typeids'][value='1']").prop("checked",true);
                  }
                  if (data.typename.indexOf("动作") != -1){
                      $("[name='typeids'][value='2']").prop("checked",true);
                      //$(this).prop("checked",true);
                  }
                  if (data.typename.indexOf("枪战") != -1){
                      $("[name='typeids'][value='3']").prop("checked",true);
                      //$(this).prop("checked",true);
                  }
              })
                uploadImg(data.img);
                directorimg(data.directorimg);
            }
        });
    }




    //上传图片
    function uploadImg(url){
        // 注意id
        $('#userImg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/uploadImg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#testimg').val(imgval);
        });
    }
    //上传导演图片
    function directorimg(url){
        // 注意id
        $('#addImg').fileinput({
            initialPreview:url,
            //初始化图片配置：
            initialPreviewConfig: [
                {key: 1, showDelete: false}
            ],
            //是否初始化图片显示
            initialPreviewAsData: true,
            language: 'zh', //设置语言
            uploadUrl: '/sec/directorimg', //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload: true, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            //dropZoneEnabled: false,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 2, //表示允许同时上传的最大文件个数
            enctype: 'multipart/form-data', //content-type
            validateInitialCount:true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

        }).on('fileuploaded', function(event, data, previewId, index) {
            //http://localhost:8080/bootstrap-wdd/
            var	imgval = data.response.path;
            $('#textimg').val(imgval);
        });
    }
</script>
</html>